"use client";

import { useTransition } from "react";
import { create{{namePascal}} } from "./{{nameKebab}}-form-action";

interface {{namePascal}}FormProps {
  defaultValues?: Partial<{ /* TODO: form fields */ }>;
}

export function {{namePascal}}Form({ defaultValues }: {{namePascal}}FormProps) {
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData: FormData) {
    startTransition(async () => {
      await create{{namePascal}}(formData);
    });
  }

  return (
    <form action={handleSubmit} className="flex flex-col gap-4">
      {/* TODO: add form fields with name attributes matching the Zod schema */}
      <button
        type="submit"
        disabled={isPending}
        className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-50"
      >
        {isPending ? "저장 중..." : "저장"}
      </button>
    </form>
  );
}